<template>
  <div class="media_sarch">
    <div class="nav_body">
      <van-nav-bar
          v-if="$store.state.device !== 'APP'"
          title="发现-搜索"
          left-text="返回"
          left-arrow
          @click-left="$router.go(-1)"/>
      <div  v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')" class="top_nav">
        <img class="logo_left" src="../../../assets/img/modules/media/icon_13.png" alt="">
        <div class="btn_right">
          <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
          <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
          <a href="/media-news">
            <img src="../../../assets/img/modules/media/icon_25.png" alt="">
          </a>
        </div>
      </div>
      <van-search id="van_search" placeholder="搜索你感兴趣的大咖" v-model="value" shape="round" @clear="clearcelebrityleList" @search="getcelebrityleList"/>
    </div>
    <div v-if="sarchActive" class="sarch_title_list">
      <p class="title_alt">热门搜索</p>
      <div class="span_list">
        <a href="javascript:;" @click="value = '国开在线';getcelebrityleList()">国开在线</a>
        <a href="javascript:;" @click="value = '国开广州实验学院';getcelebrityleList()">国开广州实验学院</a>
      </div>
    </div>
    <div v-if="!sarchActive"  class="sarch_is_body">
      <div v-if="celebrityleList.length === 0" class="sarch_title_list">
        <div class="no_data_title">
          <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
<!--          <p>未搜索到大咖~</p>-->
        </div>
      </div>
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <a :href="'/media-personal?id='+item.userId" class="item_v2_index_news" v-for="(item, index) in celebrityleList" :key="item.userId+ '' +index">
          <div class="top_img">
            <div class="left_img_text">
              <img v-if="item.isV === 2" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
              <img :src="item.avatar" alt="">
              <div class="name_text">
                <p>{{item.userNickName}}</p>
                <span>{{item.description}}</span>
              </div>
            </div>
          </div>
          <div class="text_body">
            <div class="right_text">
              <img class="video_img" :src="item.userImage ? item.userImage : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
            </div>
          </div>
        </a>
        <!--加载状态-->
        <div v-for="item in 4" :key="item">
          <van-skeleton
              title
              style="margin-top: 30px"
              avatar
              :row="4"
              :loading="loading">
          </van-skeleton>
        </div>
        <div v-if="footerShow" class="no_data_title">
          <p>没有搜索内容~</p>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
import mediaMixins from '@/utils/modules/media'
export default {
  mixins: [mediaMixins],
  name: 'media_sarch',
  components: {},
  data () {
    return {
      value: '',
      sarchActive: true,
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      articleId: 0, // 当前分类ID
      celebrityleList: [], // 文章列表
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 21:27
     *@function  删除内容
     *****************************************/
    clearcelebrityleList () {
      this.sarchActive = true
      this.celebrityleList = []
      this.current = 1
      this.finished = false
    },
    /* wf_Huang 2019/9/20 0020 回车搜索 */
    getcelebrityleList () {
      this.sarchActive = true
      this.celebrityleList = []
      this.current = 1
      this.finished = false
      this.onLoad()
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 21:26
     *@function  搜索内容
     *****************************************/
    getArticleList: debounce(function () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpusers/getUserListByUserName?userName=${this.value}&current=${this.current}&size=${this.size}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
        }
        this.sarchActive = false
        res.data.forEach(item => {
          this.celebrityleList.push(item)
        })
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    }, 500, { 'leading': true, 'trailing': false }),
    /*
         *@author wf_Huang
         *@Time 2019/8/12 0012 18:00
         *@function  上拉刷新 加载
         *****************************************/
    onLoad: debounce(function () {
      this.getArticleList()
    }, 500, { 'leading': true, 'trailing': false })
  },
  computed: {},
  created () {
  },
  mounted () {
    document.getElementById('van_search').focus()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .media_sarch {
    .nav_body{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .top_nav{
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:  0 32px;
        .logo_left{
        width: 185px;
        height: 58px;
      }
        .nav_list{
          display: flex;
          .nav_item{
            font-size: 28px;
            color: #999999;
            position: relative;
            padding: 0 15px;
          }
          .active{
            color: #027FFE;
            &:after{
              content: '';
              width: 24px;
              border-radius: 5px;
              height: 8px;
              background-color: #027FFE;
              position: absolute;
              bottom: -20px;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .btn_right{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          a{
            height: 100%;
            display: flex;
            padding: 0 10px;
            position: relative;
            img{
              width: 36px;
              height: 34px;
            }
            .active{
              width: 18px;
              height: 18px;
              position: absolute;
              right: 5px;
              top: 1px;
            }
          }
        }
      }
    }
    .sarch_title_list{
      margin-top: 290px;
      padding: 32px;
      .title_alt{
        font-size: 26px;
        color: #666666;
        margin: 0 0 20px 0;
      }
      .span_list{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          background: #F6F6F6;
          border-radius: 4px;
          height: 60px;
          line-height: 60px;
          padding: 0 40px;
          font-size: 27px;
          color: #222222;
          margin: 20px 20px 0 0;
        }
      }
    }
    .sarch_is_body{
      margin-top: 290px;
    }
    .footer_title{
      margin: 100px auto;
      text-align: center;
      img{
        width: 594px;
        height: 71px;
      }
    }
  }
</style>
